<template>
  <div class="home">
    <div class="commons_top">
      <div class="commons_back" @click="$router.go(-1)">
        <img src="@/assets/index/back.png"/>
      </div>
      <span class="commons_title">{{ title }}</span>
    </div>
    <div class="home_top">
      <div class="home_nav">
        <swiper :options="swiperOption">
          <swiper-slide
            v-for="(item, index) in navList"
            :key="index"
            class="home_nav_swiper"
          >
            <div @click="resourceTap(index, item.code)" class="home_nav_name">
              <span :class="navId == index ? 'home_nav_hover' : ''">{{
                item.showName
              }}</span>
            </div>
          </swiper-slide>
        </swiper>
      </div>
      <div class="home_sort" v-if="type == 1">
        <span v-for="(item,index) in resourceInfo" :key="index" 
        @click="order(item.type+' desc',index)" :class="infoIndex==index?'info_sele':''">{{item.text}}</span>
      </div>
    </div>
    <div class="home_banner" v-if="adCover">
      <img :src="coverUrl(adCover)" />
    </div>
    <div
      class="home_wrap"
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="10"
    >
      <div
        class="home_list"
        v-for="(item, index) in pageList"
        :key="index"
        @click="
          item.resourceType == 1
            ? linkBook(item.id)
            : item.resourceType == 4
            ? linkVideo(item.id)
            : linkAudio(item.id)
        "
      >
        <div
          :class="
            item.resourceType == 1
              ? 'home_book_cover'
              : item.resourceType == 4
              ? 'home_video_cover'
              : 'home_audio_cover'
          "
        >
          <img
            class="home_cover"
            :src="coverUrl(item.cover)"
            v-if="item.cover"
          />
          <img class="home_cover" :src="coverUrl(item.imgPath,'file')" v-if="item.resourceType==4&&!item.cover&&item.imgPath">
          <img src="@/assets/common/default_video.png" v-if="item.resourceType==4&&!item.cover&&!item.imgPath" class="home_cover">
          <img src="@/assets/common/default_book.png" v-if="item.resourceType==1&&!item.cover" class="home_cover">
          <img src="@/assets/common/default_audio.png" v-if="item.resourceType==5&&!item.cover" class="home_cover">
          <img
            src="@/assets/index/video_icon.png"
            v-if="item.resourceType != 1 && item.resourceType == 4"
            class="home_icon"
          />
          <img
            src="@/assets/index/audio_icon.png"
            v-if="item.resourceType != 1 && item.resourceType == 5"
            class="home_icon"
          />
        </div>
        <div class="home_con">
          <div class="home_name">{{ item.name }}</div>
          <div class="home_author" v-if=" item.authorList && item.authorList.length > 0 && item.resourceType == 1">
            <span v-for="info in item.authorList.slice(0, 1)" :key="info.id">{{info.author }}</span>
          </div>
          <div class="home_author" v-if="item.authorList && item.authorList.length==0 && item.resourceType == 1">
            暂无
          </div>
          <div class="home_rate" v-if="item.resourceType == 1">
            <el-rate
              v-model="item.score"
              disabled
              text-color="#FFE400"
              :colors="starColor"
              style="float:left;margin-right:0.1rem;"
            ></el-rate>
            <span class="score_text">{{ item.resourceScore }}</span>
            <span class="rate_num">{{ item.commentNum }}人评分</span>
          </div>
          <div
            class="home_intro"
            :style="item.resourceType != 1 ? 'margin:0.28rem 0' : ''"
          >
            {{ item.synopsis }}
          </div>
          <div class="home_box" v-if="item.resourceType != 1">
            <span class="home_price" v-if="item.realPrice > 0">￥{{ item.realPrice }}</span>
            <span class="home_free" v-else>免费</span>
            <span class="home_browse">浏览 {{ item.browseNum }}</span>
          </div>
        </div>
      </div>
      <p v-if="loading" class="page-infinite-loading">
        <span>
          <mt-spinner type="fading-circle"></mt-spinner>
          加载中...
        </span>
      </p>
      <p v-else class="loadOver">
        <span v-if="!isNull && isLast">—— 我是有底线的 ——</span>
      </p>
    </div>
    <div class="special_no" v-if="pageList && pageList.length <= 0">
      <img class="no_con" src="@/assets/common/no_content.png">
      <div class="no_text">抱歉，目前暂无内容哦~</div>
    </div>
  </div>
</template>

<script>
import "@static/css/common.css";
import { Toast } from "mint-ui";
import { starColor } from "@/utils/static";
import { getAdsList } from "@/api/index.js";
import { getTreeAPI, getListAPI } from "@/api/home";

export default {
  data() {
    return {
      starColor,
      title: null,
      type: null,
      searchType: 1,
      pageList: [],
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        resourceType: 1,
        diyTypeCode: null,
        orderBy: null
      },
      swiperOption: {
        //可视区域个数
        slidesPerView: "auto"
      },
      navList: [],
      navId: 0,
      adCover: null,
      totalPage: null,
      loading: false,
      isNull: "",
      isLast: "",
      resourceInfo:[
        { text:'阅读排行榜', type:'browseNum' },
        { text:'最新上架', type:'uploadTime' },
      ],
      infoIndex: null
    };
  },
  mounted() {
    this.title = this.$route.query.name;
    this.type = this.$route.query.type;
    this.getNav();
    this.getAds();
    this.getList()
  },
  methods: {
    getNav() {
      //获取一级分类列表
      getTreeAPI({ name: this.title + "分类" }).then(res => {
        if (res.data.code === 0) {
          this.navList = res.data.data[0].children;
          this.listQuery.diyTypeCode = res.data.data[0].children[0].code;
          this.getList();
        } else {
          Toast(res.data.msg);
        }
      });
    },
    resourceTap(index, code) {
      //切换nav
      this.navId = index;
      this.listQuery.diyTypeCode = code;
      this.listQuery.pageNum = 1
      this.pageList = [];
      this.getList();
    },
    order(type,index) {
      //排序
      this.infoIndex = index
      this.listQuery.orderBy = type;
      this.getList();
    },
    getAds() {
      //获取广告图
      let code =
      this.type == 1 ? "YDTSBJT" : this.type == 4 ? "YDSPBJT" : "YDYPBJT";
      getAdsList({ num: 1, code: code }).then(res => {
        if (res.data.code == 0) {
          this.adCover = res.data.data && res.data.data.length > 0 ? res.data.data[0].cover : null;
        } else {
          Toast(res.data.msg);
        }
      });
    },
    getList() {
      this.loading = true;
      this.listQuery.resourceType = this.type;
      getListAPI(this.listQuery).then(res => {
        if (res.data.code === 0) {
          let list = [];
          if (this.listQuery.pageNum == 1) {
            list = res.data.data.resList;
          } else {
            list = this.pageList.concat(res.data.data.resList);
          }
          this.pageList = list;
          this.totalPage = res.data.data.pageCount;
          this.isNull = list && list.length > 0 ? false : true;
          this.isLast =
            res.data.data.pageCount == this.listQuery.pageNum ? true : false;
        } else {
          Toast(res.data.msg);
        }
        this.loading = false;
      });
    },
    loadMore() {
      if (this.totalPage > this.listQuery.pageNum) {
        this.listQuery.pageNum = this.listQuery.pageNum + 1;
        this.getList();
      }
    },
    linkBook(id) {
      this.navigationFuc("bookDet", { id });
    },
    linkVideo(id) {
      this.navigationFuc("videoDet", { id });
    },
    linkAudio(id) {
      this.navigationFuc("audioDet", { id });
    }
  }
};
</script>

<style>
.home .el-rate {
  line-height: 0 !important;
}
.home .el-rate__icon {
  margin-right: 0 !important;
  font-size: 14px !important;
}
.home .mint-spinner-fading-circle {
  margin: 0 auto;
  margin-bottom: 10px;
}
.home .page-infinite-loading {
  text-align: center;
  padding: 10px;
  color: #999999;
  font-size: 14px;
}
.home .loadOver {
  height: 0.8rem;
  text-align: center;
  line-height: 0.8rem;
  color: #999999;
  font-size: 14px;
}
</style>
<style scoped>
.home {
  width: 100%;
  height: 100vh;
  background: #ffffff;
}
.home .commons_top {
  background: #fff;
  position: relative;
  z-index: 100;
}
.home_top {
  background: #fff;
  box-shadow: 0px -1px 42px 0px rgba(223, 223, 223, 0.6);
}
/* 头部滑动导航 */
.home_nav {
  width: 100%;
  padding: 0.17rem 0.3rem 0;
  overflow: hidden;
  box-sizing: border-box;
}
.home_nav_swiper {
  width: auto !important;
  max-width: 10rem;
  text-align: center;
  margin-right: 0.45rem;
}
.home_nav_swiper:last-child {
  margin-right: 0;
}
.home_nav_name {
  font-size: 15px;
  color: #8f8dab;
  font-weight: 500;
  line-height: 0.7rem;
  position: relative;
}
.home_nav_hover {
  display: inline-block;
  font-weight: bold;
  font-size: 18px;
  color: #fd6f6b;
  position: relative;
  z-index: 101;
}
.home_nav_hover::before {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 0.06rem;
  background: #fd6f6b;
  margin: 0 auto;
  bottom: 0;
}
/* 头部排序 */
.home_sort {
  padding-bottom: 0.3rem;
  padding-left: 0.35rem;
  margin-top: 0.55rem;
}
.home_sort span {
  padding: 0.12rem 0.2rem;
  background: #f8f8f7;
  border-radius: 0.1rem;
  color: #333333;
  font-size: 10px;
  border: 1px solid #f8f8f7;
}
.home_sort .info_sele {
  border: 1px solid #FD6F6B;
  color: #FD6F6B;
}
.home_sort span:last-child {
  margin-left: 0.2rem;
}
/* 广告图 */
.home_banner {
  height: 2.4rem;
  margin: 0.4rem auto 0.2rem;
  padding: 0 0.3rem;
  box-sizing: border-box;
}
.home_banner img {
  width: 100%;
  height: 100%;
  border-radius: 0.2rem;
}
/* 列表 */
.home_list {
  padding: 0.3rem;
  box-sizing: border-box;
  border-bottom: 1px solid #eeeeee;
  display: flex;
}
.home_book_cover {
  width: 1.5rem;
  height: 2.1rem;
}
.home_video_cover {
  width: 2.6rem;
  height: 1.46rem;
  position: relative;
}
.home_audio_cover {
  width: 1.78rem;
  height: 1.78rem;
  position: relative;
}
.home_cover {
  width: 100%;
  height: 100%;
  border-radius: 0.1rem;
}
.home_icon {
  width: 0.4rem;
  height: 0.4rem;
  position: absolute;
  bottom: 0.16rem;
  right: 0.16rem;
}
.home_con {
  flex: 1;
  margin-left: 0.32rem;
}
.home_name {
  width: 100%;
  font-size: 16px;
  color: #5e5f71;
  font-weight: bold;
  overflow: hidden;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  display: -webkit-box;
}
.home_author {
  margin: 0.12rem 0;
  color: #b2b1c3;
  font-size: 12px;
}
.home_rate {
  overflow: hidden;
}
.score_text {
  color: #fd7068;
  font-weight: bold;
  font-size: 14px;
  float: left;
}
.rate_num {
  color: #5e5f71;
  font-size: 14px;
  font-weight: bold;
  margin-left: 0.16rem;
  margin-top: -0.03rem;
  float: left;
}
.home_intro {
  width: 100%;
  color: #5e5f71;
  font-size: 12px;
  height: 0.64rem;
  margin-top: 0.1rem;
  overflow: hidden;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
}
.home_box {
  overflow: hidden;
}
.home_price {
  color: #fe2023;
  font-size: 12px;
  font-weight: 500;
  float: left;
}
.home_free {
  color: rgb(10, 181, 98);
  font-size: 12px;
  font-weight: 500;
  float: left;
}
.home_browse {
  color: #b2b1c3;
  font-size: 12px;
  font-weight: 500;
  float: right;
}
</style>
